<!--学位考试管理-->
<template>
  <div class="courseBox">
    <div class="top">
        <!-- <el-card>
            <el-form :inline="true" :model="formSearch" class="demo-form-inline">
                <el-form-item label="姓名">
                    <el-input v-model="formSearch.name" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="证件号">
                    <el-input v-model="formSearch.certificate" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="所属单位">
                    <el-input v-model="formSearch.company" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small">查询</el-button>
                    <el-button type="info" @click="reset" size="small">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card> -->
    </div>
    <div class="bottom">
        <el-card>
            <div class="moreBtn">
              <el-button type="primary" size="small" class="newAdd" @click="addItem"> <i class="el-icon-plus"></i>新增</el-button>
                <el-upload class="upload-demo" name="file" action="action" :show-file-list="false" :http-request="fileChange">
                    <el-button type="primary" class="daoru">
                        <span class="icon iconfont icon-daoru"></span>
                        导入1
                    </el-button>
                </el-upload>
              <el-button type="primary" size="small" class="exportBtn" @click="exportBtn">
                <span class="icon iconfont icon-daochu"></span>
                导出
              </el-button>
            </div>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column type="index" label="序号" width="80"></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="sex" label="性别">
                    <template slot-scope="scope">
                        <span>{{scope.row.sex == '40' ? '男' : '女'}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="academicYearTerm" label="学年学期"></el-table-column>
                <el-table-column prop="colleage" label="学院"></el-table-column>
                <el-table-column prop="major" label="专业"></el-table-column>
                <el-table-column prop="clbum" label="班级"></el-table-column>
                <el-table-column prop="degree" label="学位类型"></el-table-column>
                <el-table-column prop="results" label="成绩"></el-table-column>
                 <el-table-column
                    fixed="right"
                    label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="release(scope.row)">查看详细</el-button>
                        <el-button type="text" size="small" @click="print(scope.row.id)">打印</el-button>
                    </template>
                </el-table-column>
            </el-table>
             <div class="block" v-show="tableData.length > 0">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-size="10"
                        prev-text="上一页"
                        next-text="下一页"
                        layout="prev, pager, next, jumper"
                        ref="pagination"
                        :total="total"
                    >
                    </el-pagination>
                    <el-button class="sure" type="primary">确定</el-button>
                </div>
        </el-card>
    </div>
    <div class="dialog">
        <el-dialog
            :title="isEdit ? '修改' : '添加' "
            :visible.sync="dialogVisible"
            width="30%"
            >
            <el-form ref="ruleForm" :rules="rules" :disabled="isEdit" :model="ruleForm" label-width="80px">
              <div class="detail">
                <el-form-item label="姓名：" prop="name">
                  <el-input v-model="ruleForm.name" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="性别：" prop="gender">
                  <el-select
                    v-model="ruleForm.gender"
                    @change="genderChange"
                    placeholder="请选择性别"
                  >
                    <el-option
                      v-for="item in sexOptions"
                      :key="item.typeId"
                      :label="item.typeName"
                      :value="{value:item.typeId,label:item.typeName}"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="所属院校：" prop="colleage">
                  <div class="addSelect">
                    <!-- <p class="superiorCollege">所属院校：</p> -->
                    <el-select
                      v-model="ruleForm.colleage"
                      clearable
                      placeholder="请选择"
                      @clear="infoHandleClear"
                      ref="infoSelectUpResId"
                    >
                      <el-option hidden :value="ruleForm.colleage" :label="infoUpResName">
                      </el-option>
                      <el-tree
                        :data="editSeletOptions"
                        :props="defaultProps"
                        :expand-on-click-node="false"
                        :check-on-click-node="true"
                        @node-click="infoHandleNodeClick"
                      >
                      </el-tree>
                    </el-select>
                  </div>
                </el-form-item>
                <el-form-item label="所属专业：" prop="major">
                  <div class="addSelect">
                  <!-- <p class="superiorCollege">所属专业：</p> -->
                  <el-select
                    v-model="ruleForm.major"
                    @change="majorSelect"
                  
                    placeholder="请选择所属专业"
                  >
                    <el-option
                      v-for="item in editMajorOptions"
                      :key="item.majorId"
                      :label="item.majorName"
                      :value="{value:item.majorId,label:item.majorName}"
                    >
                    </el-option>
                  </el-select>
                  </div>
                </el-form-item>
                <!-- <el-form-item label="年级：" prop="grade">
                    <el-select
                        v-model="ruleForm.grade"
                        clearable
                      
                        placeholder="请选择年级"
                        style="width: 200px"
                        >
                        <el-option v-for="item in gradetData" :key="item.typeId" :label="item.typeName" :value="item.typeId"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="班级：" prop="clbum">
                  <div class="addInput">
                    <el-select
                      v-model="ruleForm.clbum"
                      @change="clbumChange"
                      placeholder="请选择所属班级"
                    >
                      <el-option
                        v-for="item in classListData"
                        :key="item.classId"
                        :label="item.className"
                        :value="{value:item.classId,label:item.className}"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </el-form-item>
                <el-form-item label="学位类型：" prop="degree" >
                  <div class="addInput">
                    <el-select
                      v-model="ruleForm.degree"
                      @change="degreeChange"
                      placeholder="请选择所属班级"
                    >
                      <el-option
                        v-for="item in degreeList"
                        :key="item.typeId"
                        :label="item.typeName"
                        :value="{value:item.typeId,label:item.typeName}"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </el-form-item>
                <el-form-item label="学年学期" prop="academicYearTerm" >
                  <div class="addInput">
                    <el-select
                      v-model="ruleForm.academicYearTerm"
                      @change="academicYearTermChange"
                      placeholder="请选择所属班级"
                    >
                      <el-option
                        v-for="item in academicYearTermOption"
                        :key="item.id"
                        :label="item.schoolYearName"
                        :value="{value:item.id,label:item.schoolYearName}"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </el-form-item>
                <el-form-item label="成绩：" prop="results">
                  <el-input v-model="ruleForm.results"></el-input>
                </el-form-item>
              </div>
            </el-form>
            <div class="footerBtn">
              <el-button type="primary" size="small" @click="submitForm('ruleForm')">确定</el-button>
              <el-button type="primary" size="small" @click="resetForm('ruleForm')">取消</el-button>
            </div>
        </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getDegreescoreListApi,
  exportEegreescoreListApi,
  ImportEegreescoreApi,
  classifySexApi,
  schoolYearSemesterListApi,
  addDegreescoreItemApi
} from "@/api/selfStudy/degreescore.js"
import {
  getClassGradeListApi,
  majorListApi,
  getGradeListApi,
  colleageTreeDataApi
} from "@/api/selfStudy/thegraduate.js"
export default {
  data() {
    return {
      ruleForm: {
        name:'',
        sex:'',
        academicYearTerm:'',
        colleage:'',
        major:'',
        clbum:'',
        degree:'',
        results:''
      },
      tableData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      currentPage:1,  // 页码
      infoUpResName:'',
      dialogVisible:false, // 弹框开关
      isEdit:false,  // 修改 / 添加
      editSeletOptions:[], // 学院数据
      editMajorOptions:[], // 专业数据
      gradetData:[], // 年级数据
      classListData:[], // 班级数据
      degreeList:[], // 学位数据
      academicYearTermOption:[],
      defaultProps: {
        children: "children",
        label: "label"
      },
      filename:'学位成绩表',
      rules:{
        name:[{ required: true, message: '请输入姓名', trigger: 'blur'}],
        sex:[{ required: true, message: '请选择性别', trigger: 'blur'}],
        colleage:[{ required: true, message: '请选择学院', trigger: 'blur'}],
        major:[{ required: true, message: '请选择所属专业', trigger: 'blur'}],
        // grade:[{ required: true, message: '请选择年级', trigger: 'blur'}],
        clbum:[{ required: true, message: '请选择班级', trigger: 'blur'}],
        degree:[{ required: true, message: '请选择学位类型', trigger: 'blur'}],
        results:[{ required: true, message: '请输入成绩', trigger: 'blur'}]
      },
      sexOptions:[],
      ruleObj: {
        name:'',
        gender:'',
        academicYearTerm:'',
        colleage:'',
        major:'',
        clbum:'',
        degree:'',
        results:''
      },

    };
  },

  mounted() {
    this.getDegreescoreList()
    getGradeListApi({parentId:55}).then(res=>{
      console.log(res);
      this.gradetData = res.rows
    })
    this.editSelectTreeData()
    classifySexApi({parentId:39}).then(res=>{
      this.sexOptions = res.rows
    })
    classifySexApi({parentId:212}).then(res=>{
      this.degreeList = res.rows
    })

    schoolYearSemesterListApi().then(res=>{
      console.log(res);
      this.academicYearTermOption = res.rows
    })
    

  },
  
  methods: {
    // 导入
    fileChange(files) { 
        let formData = new FormData(); 
        formData.append('file', files.file);
        ImportEegreescoreApi(formData).then((res) => {
            console.log(res);
            if(res.code === 200) {
              this.getDegreescoreList()
            }
        });
    },

    genderChange(data) {
      this.ruleObj.gender = data.label
      // this.ruleForm.gender = data.id
    },

    clbumChange(data) {
      this.ruleObj.clbum = data.label
      // this.ruleForm.clbum = data.id
    },

    degreeChange(data) {
      this.ruleObj.degree = data.label
      // this.ruleForm.degree = data.id
    },

    academicYearTermChange(data) {
      this.ruleObj.academicYearTerm = data.label
      // this.ruleForm.academicYearTerm = data.id
    },

    exportBtn() {
        this.$confirm("是否导出全部数据？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
            exportEegreescoreListApi().then((res)=>{
              console.log(res)
              if (!res) return;
              const blob = new Blob([res], {
                type: "application/vnd.ms-excel",
              }); // 构造一个blob对象来处理数据，并设置文件类型
              if (window.navigator.msSaveOrOpenBlob) {
                //兼容IE10
                navigator.msSaveBlob(blob, this.filename);
              } else {
                const href = URL.createObjectURL(blob); //创建新的URL表示指定的blob对象
                const a = document.createElement("a"); //创建a标签
                a.style.display = "none";
                a.href = href; // 指定下载链接
                a.download = this.filename; //指定下载文件名
                console.log(this.filename);
                a.click(); //触发下载
                URL.revokeObjectURL(a.href); //释放URL对象
              }
            })
            // const a = document.createElement("a"); //创建a标签
            // a.href = `${HOST}/common/download?fileName=${res.msg}`; // 指定下载链接
            // a.click(); //触发下载
        })
          .catch(() => {});
    },

    infoHandleClear() {},

    // 学院
    async editSelectTreeData() {
      const data = await colleageTreeDataApi();
      this.editSeletOptions = data.data;
    },

    majorSelect(data) {
      console.log(data);
      this.getMajorIdClass(data.id)
      this.ruleObj.major = data.label
    },

    
    infoHandleNodeClick(data) {
      console.log(data);
      this.infoUpResName = data.label;
      this.ruleForm.colleage = data.id;
      // 选择器执行完成后，使其失去焦点隐藏下拉框的效果
      this.$refs.infoSelectUpResId.blur();
      this.editSelectValueHandler(data.id)
      this.ruleObj.colleage = data.label
    },

    // 新增所属专业下拉框
    async editSelectValueHandler(id) {
      console.log(id,'-----------');
      // console.log(id, "arr");
      const data = await majorListApi({ colleageId: id, status:'0'});
      console.log(data);
      this.editMajorOptions = data.rows;
    },

    // 根据专业id查询班级
    async getMajorIdClass(id) {
     const data = await getClassGradeListApi({majorId:id})
      this.classListData = data.rows
      console.log(data,'-------->班级');
      // this.getCourseData(id)

    },

    getDegreescoreList() {
      getDegreescoreListApi({pageSize:'10',pageNum:this.currentPage}).then(res=>{
        if(res.code === 200) {
          this.tableData = res.rows
          this.total = res.total
        }
      })
    },

    submitForm(formName) {
      console.log(this.ruleObj);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
          this.ruleObj.name = this.ruleForm.name
          this.ruleObj.results = this.ruleForm.results
          addDegreescoreItemApi(this.ruleObj).then(res=>{
            console.log(res);
            if(res.code === 200) {
              this.$message({
                type: 'success',
                message: '添加成功',
              });
              this.getDegreescoreList()
            }else {
              this.$message({
                type: 'error',
                message: '添加失败',
              });
            }
          })
          this.dialogVisible = false
        } else {
          return false;
        }
      });
    },
    // 新增
    addItem() {
      this.dialogVisible = true
      this.isEdit = false
      this.ruleForm = {}
      this.infoUpResName = ""
    },
    resetForm(formName) {
      this.dialogVisible = false
      this.$refs[formName].resetFields();
    },
    reset() {
      this.formSearch = {};
      this.getDegreescoreList()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);

    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.getDegreescoreList()

    },
    release(row) {
      console.log(row);
      this.dialogVisible = true
      this.isEdit = true
      this.ruleForm = row
      this.ruleForm.gender = this.ruleForm.gender == '40' ? '男' : '女'
      this.ruleForm.colleage = Number(this.ruleForm.colleage)
      this.ruleForm.major = Number(this.ruleForm.major)
      this.ruleForm.clbum = Number(this.ruleForm.clbum)
      this.ruleForm.degree = Number(this.ruleForm.degree)

      // this.$router.push({
      //   path: `/Degree/Degreedetail/${id}`
      // });
    },
    print(id) {
      console.log(id);
      this.$router.push({
        path: `/SelfStudy/Printdetail/${id}`
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.courseBox {
  width: 100%;
  padding: 10px;
  .top {
    width: 100%;
    margin-bottom: 10px;
  }
  .moreBtn{
    display: flex;
    margin-bottom: 10px;
    // justify-content:;
    .upload-demo{
      margin: 0 10px;
    }
    button{
      border: none;
    }
    .newAdd {
      background-color: rgb(86, 164, 212);
    }
    .daoru{
      background-color: #66c8e3;
    }
    .exportBtn {
      background-color: #fabd90;
    }
  }
  .block {
        padding: 0 20px 0 0;
        height: 65px;
        display: flex;
        align-items: center;
        justify-content: right;
        background-color: #fff;

        ::v-deep .btn-prev {
        border: solid 1px #e6e6e6;
            border-radius: 5px;
            color: #6f6f6f;
        }

        ::v-deep .btn-next {
            border: solid 1px #e6e6e6;
            border-radius: 5px;
            color: #6f6f6f;
        }
        ::v-deep .el-pager li {
            background: #fff;
            font-size: 13px;
            min-width: 30.5px;
            height: 28px;
            line-height: 28px;
            box-sizing: border-box;
        }

        ::v-deep .el-pager li.active {
            background-color: #4895db;
            color: #fff;
            cursor: default;
        }
        ::v-deep .number {
            border: solid 1px #e6e6e6;
            margin: 0 5px;
            border-radius: 5px;
            color: #6f6f6f;
        }
        ::v-deep .el-button {
            height: 28px;
            line-height: 0;
        }
        .sure {
            width: 50px;
            height: 30px;
            line-height: 0;
            text-align: center;
            padding: 0;
        }
    }
  .dialog {
    .block {
      width: 280px;
      height: 30px;
      border: solid 1px #dcdfe6;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      background-color: #fff;

      ::v-deep .el-input__inner {
        width: 240px;
        height: 28px;
        border: none;
      }

      ::v-deep .el-icon-arrow-down {
        color: #c2c2c2;
        padding: 0 10px 0 0;
      }

      ::v-deep .el-icon-arrow-up {
        color: #c2c2c2;
        padding: 0 10px 0 0;
      }

      ::v-deep .el-date-picker.has-sidebar {
        left: 460px !important;
        background-color: #4895db;
      }
    }

    .mb,
    .px {
      ::v-deep .el-form-item__content {
        display: flex;
        width: 280px;
        line-height: 30px;
        border: solid 1px #dcdfe6;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 5px;

        .el-input__inner {
          border: none;
        }

        span {
          font-size: 14px;
          padding-left: 5px;
          color: #888;
        }
      }
    }

    ::v-deep .el-dialog {
      max-width: 750px;
      min-width: 500px;
      border-radius: 10px;
      background-color: #f9f9f9;
    }

    ::v-deep .el-dialog__header {
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      background-color: #4895db;
      padding: 0;
      border-radius: 10px 10px 0 0;

      span {
        font-size: 16px;
        color: #fff;
      }
    }

    ::v-deep .el-select > .el-input {
      display: block;
      width: 300px;
    }

    ::v-deep .el-form-item__label {
      line-height: 32px;
      width: 120px !important;
    }

    ::v-deep .el-input__inner {
      height: 30px;
      line-height: 30px;
    }

    ::v-deep .el-dialog__headerbtn {
      top: 15px;
    }

    ::v-deep .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
      font-size: 18px;
    }

    ::v-deep .el-dialog--center .el-dialog__body {
      text-align: initial;
      display: flex;
      justify-content: center;
    }

    ::v-deep .el-input__icon {
      line-height: 30px;
    }

    ::v-deep .el-form-item__content {
      width: 300px;
      line-height: 30px;
      margin-left: 0 !important;
    }

    ::v-deep .el-form-item {
      margin-bottom: 15px;
      display: flex;
      justify-content: center;
    }

    ::v-deep .el-dialog__footer {
      padding: 10px 20px 40px;
    }
    .footerBtn{
      text-align: center;
    }

    // ::v-deep .el-button + .el-button {
    //   border-radius: 20px;
    //   margin-left: 50px;
    //   background-color: #4895db;
    //   border-color: #4895db;
    // }
  }
}
</style>